<template>
  <div id="content">
    <globle-linear-border>
      <el-card class="searchBox">
        <el-form :inline="true">
          <el-form-item label="学年">
              <el-select v-model="pageQuery.otherParams.schoolYear" placeholder="选择学年搜索" clearable>
                <el-option v-for="item in schoolYearList" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="学期">
              <el-select v-model="pageQuery.otherParams.stage" placeholder="选择学期搜索" clearable> 
                <el-option v-for="item in stageList" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          <el-form-item label="课程代码">
            <el-input v-model="pageQuery.otherParams.courseCode" placeholder="输入课程代码搜索" clearable />
          </el-form-item>
          <el-form-item label="教学班">
            <el-input v-model="pageQuery.otherParams.teachClass" placeholder="输入课程名称搜索" clearable />
          </el-form-item>
          <el-form-item label="学号">
            <el-input v-model="pageQuery.otherParams.studentId" placeholder="输入学生学号搜索" clearable />
          </el-form-item>
          <el-form-item label="姓名">
            <el-input v-model="pageQuery.otherParams.stuName" placeholder="输入学生姓名搜索" clearable />
          </el-form-item>
          <el-form-item label="学院">
            <el-input v-model="pageQuery.otherParams.college" placeholder="输入学生学院搜索" clearable />
          </el-form-item>
          <el-form-item label="专业">
            <el-input v-model="pageQuery.otherParams.major" placeholder="输入学生专业搜索" clearable />
          </el-form-item>
          <el-form-item label="班级">
            <el-input v-model="pageQuery.otherParams.stuClass" placeholder="输入学生班级搜索" clearable />
          </el-form-item>
          <el-form-item>
            <section>
              <el-button type="primary" icon="Search" @click.stop="getPageInfo">搜 索</el-button>
              <el-button type="warning" icon="RefreshRight" @click.stop="reset">重 置</el-button>
            </section>
          </el-form-item>
        </el-form>
      </el-card>
    </globle-linear-border>
    <!-- 表格 -->
    <globle-linear-border style="margin-top: 20px">
      <el-card class="mainBox">
        <span v-if="tableData.rows">
            <el-table :border="true" stripe ref="tableRef" :data="tableData.rows" cell-class-name="table-cell"
              header-cell-class-name="table-header-cell">
              <el-table-column property="courseCode" label="课程代码" width="100"/>
              <el-table-column property="courseName" label="课程名称" />
              <el-table-column property="teachClass" label="教学班" />
              <el-table-column property="studentId" label="学号" show-overflow-tooltip />
              <el-table-column property="stuName" label="姓名" width="100"/>
              <el-table-column label="年级">
                <template #default="scope">{{ scope.row.grade + '级' }}</template>
              </el-table-column>
              <el-table-column property="college" label="学院" />
              <el-table-column property="major" label="专业" />
              <el-table-column property="stuClass" label="班级">
                <template #default="scope">{{ scope.row.stuClass }}</template>
              </el-table-column>
              <el-table-column property="score" label="分数" width="100">
                <template #default="scope">{{ scope.row.score ? scope.row.score : '待录入' }}</template>
              </el-table-column>
              <el-table-column property="createTime" label="录入时间" width="180">
                <template #default="scope">{{ scope.row.createTime ? scope.row.createTime : '待录入' }}</template>
              </el-table-column>
            </el-table>
          <el-pagination v-model:currentPage="pageQuery.pageParams.pageNum"
            v-model:page-size="pageQuery.pageParams.pageSize" :page-sizes="pageSizeOption" :background="true"
            :small="true" layout="total, sizes, prev, pager, next, jumper" :total="tableData.totalSize"
            @size-change="onSizeChange" @current-change="onCurrentChange" />
        </span>
      </el-card>
    </globle-linear-border>
    
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue';
import { APIData, IScorePageParams, IPageRes, ITchCoYearParams, ITchCoYearList } from '../../../type';
import { useAPI } from '../../../request/api';
import { useUserStore } from '../../../store/user';
import { ElMessage, ElTable } from 'element-plus';

// let rowData = {} as ICourse;
const api = useAPI();
const userStore = useUserStore();
const pageSizeOption = [5, 10, 15, 20];
const tableData = ref({} as IPageRes);
const tableRef = ref<InstanceType<typeof ElTable>>();
const schoolYearList = ref([] as { label:string; value:string }[]);
const stageList = ref([] as { label:string;value:number }[]);
const pageQuery = reactive<IScorePageParams>({
otherParams: {
  courseId: '',
  studentId: '',
  stuName: '',
  stuClass: '',
  major: '',
  college: '',
  grade: '',
  workId: userStore.userInfo.workId,
  score: '',
  courseCode: '',
  teachClass: '',
  tchName: '',
  schoolYear: '',
},
pageParams: {
  pageNum: 1,
  pageSize: pageSizeOption[1],
  sortField: '',
  sortType: '',
},
});

onMounted(() => {
  getTchCoYearList();
  getPageInfo();
})

const reset = () => {
pageQuery.otherParams = {
  courseId: '',
  studentId: '',
  stuName: '',
  stuClass: '',
  major: '',
  college: '',
  grade: '',
  workId: userStore.userInfo.workId,
  score: '',
  courseCode: '',
  teachClass: '',
  tchName: ''
}
pageQuery.pageParams = {
  pageNum: 1,
  pageSize: pageSizeOption[1],
  sortField: '',
  sortType: ''
}
getPageInfo();
}

//分页大小
const onSizeChange = (val: number) => {
pageQuery.pageParams.pageSize = val;
  pageQuery.pageParams.pageNum = 1;
getPageInfo();
};

//分页页码
const onCurrentChange = (val: number) => {
pageQuery.pageParams.pageNum = val;
getPageInfo();
};

const getTchCoYearList = async () => {
  const params: ITchCoYearParams = {workId: userStore.userInfo.workId}
  const res: APIData = await api.course.findTchCoYearList(params);
  if (res.code === 200) {
    const resData: ITchCoYearList = res.data;
    //创建选择器option数组并排序
    resData.schoolYearList.forEach((item: string,index: number) => {
      if(index != 0 && Number(item.split('-')) <  Number(resData.schoolYearList[index-1].split('-')))
      schoolYearList.value.push({label: `${item}学年`,value:`${item}`})
      else schoolYearList.value.unshift({label: `${item}学年`,value:`${item}`})
    });
    
    resData.stageList.forEach((item: number,index: number) => {
      if(index != 0 && item > resData.stageList[index-1]) {
        if(item == 1) stageList.value.push({label: `第一学期`,value: item})
        else stageList.value.push({label: `第二学期`,value: item})
      }
      else {
        if(item == 1) stageList.value.unshift({label: `第一学期`,value: item})
        else stageList.value.unshift({label: `第二学期`,value: item})
      }
    });
  }
  else ElMessage.error(res.message);
};

const getPageInfo = async () => {
const res: APIData = await api.score.findPage(pageQuery);
if (res.code == 200) tableData.value = res.data;
};
</script>

<style lang="scss" scoped>
#content {
height: 100%;
padding: 14px 32px;

.searchBox {
  &-item {
    margin-right: 10px;
  }

  :deep(.el-card__body) {
    display: flex;
    justify-content: space-between;
  }

  section {
    display: flex;
  }

  :deep(.el-input__wrapper) {
    width: 200px;
  }
}

.mainBox {
  :deep(.el-checkbox__inner) {
    background-color: var(--main-color);
    transition: background 0.3s ease;
  }

  :deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
    background-color: var(--active-color);
    transition: background 0.3s ease;
  }

  .el-form-item {
    margin-bottom: 0;
  }

  :deep(.el-form-item__error) {
    position: absolute;
    right: 8px;
    top: 8px;
    left: auto;
  }
}
}
</style>
